<template>
    <div id="excel-import" class="jx-content" :class="{'isCreativeCourse':isCreativeCourse}">
        <div class="excel-content">
        <el-upload ref="upload" :on-success="handleAvatarSuccess" :on-error="uploadError" :before-upload="uploadProgress" class="upload-demo" :action="'/tes/course/' + $localstorage.getLocalStorage('setCourseId')+ '/businessType/1/question-repository/import-from-excel'" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" :show-file-list="false" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :auto-upload="false">
            <div @click="clearFiles" class="button-style">上传Excel</div>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
        <a :href="'/tes/course/'+ $localstorage.getLocalStorage('setCourseId')+ '/businessType/1/question-repository/model'">Excel模板下载
            <i class="iconfont icon-tubiaozhizuo-"></i>
        </a>
        </div>
        <div class="upload-file" v-if="fileList.length">
        <div v-for="(item,index) in fileList" :key="index">
            <span>{{ item.name }}</span>
            <i @click="clearFilesUser" style="cursor:pointer;" class="iconfont icon-shanchu"></i>
        </div>
        </div>
        <div class="btn-group">
        <div class="button-style" @click="submitUpload">保 存</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //是否是创作课程页面下
            isCreativeCourse:true,
            fileList: []
        };
    },
    created() {
        //验证页面是不是创建课程的页面
        let currentPath = this.$router.history.current.path;
        if (currentPath.match("CreativeCourse")) {
            this.isCreativeCourse = true;
        } else {
            this.isCreativeCourse = false;
        }
        //CreativeCourse
        console.log(this.$router.history.current.path, 66666);
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.reGetChapter();
        },
        reGetChapter() {
            let self = this;
            self.$http.get("/tes/course/"+this.$localstorage.getLocalStorage("setCourseId") + "/chapter/list/owner").then(response => {
                let res = response.data;
                if (res.code == "200") {
                    self.$nextTick(() => {
                    self.tableData = res.data;
                    });
                    //已经有章节,判断导航显示
                    self.$parent.mark = false;
                    self.$parent.chaperFlag = false;
                } else if (res.code == "404") {
                    self.tableData = "";
                    //暂无章节,判断导航显隐藏
                    this.$parent.mark = true;
                    this.$parent.chaperFlag = false;
                }
            }).catch(err => {
                self.$message.error(res.message);
            });
        },
        handleChange(file, fileList) {
            this.fileList = fileList;
            console.log(file, fileList);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning("只能上传一个文件");
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        submitUpload() {
            if(this.fileList.length === 0){
                this.$message.warning("请上传Excel文件");
            }
            this.$refs.upload.submit();
        },
        handleAvatarSuccess(res, file, fileList) {
            if (res.code === 200) {
                this.$message.success("文件上传成功");
                this.$router.push({ path: "ItemBankList" });
            } else {
                this.$message.error(res.message);
                this.clearFiles();
                //window.location.reload();
            }
        },
        //失败
        uploadError() {
            console.log(6666);
            this.$message.error(res.message);
        },
        //上传中
        uploadProgress() {
            console.log(123123);
            this.$message("文件上传中...");
        },
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.fileList = "";
        },
        clearFilesUser() {
            this.$refs.upload.clearFiles();
            this.fileList = "";
            this.$message.success("删除成功");
        }
    }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#excel-import.isCreativeCourse{
    margin: 20px auto 30px;
}
#excel-import {
    width: 1200px;
    margin: 0px auto 30px;
    padding: 180px 0 36px;
    text-align: center;
    .excel-content {
        display: flex;
        justify-content: center;
        .upload-demo {
            position: relative;
            .el-upload-list {
                position: absolute;
                left: 26px;
                top: 40px;
                li {
                    text-align: left;
                }
            }
        }
        .button-style {
            margin-right: 10px;
        }
        a {
            vertical-align: middle;
        }
    }
    .upload-file {
        margin: 10px 0 0 0;
        .iconfont {
            font-size: 24px;
            vertical-align: sub;
            color: $blue;
            margin: 0 0 0 10px;
        }
    }
    .btn-group {
        text-align: center;
        margin: 195px 0 0;
    }
}
</style>
